<template>
    <div>
        <div class="box">
            <div class="user">
                <img :src="data.member.avatar" alt="">
                <div class="userInfo">
                    <div class="userName">{{data.member.uname}}</div>
                    <div class="time">{{data.reply_control.time_desc}}</div>
                </div>
            </div>
            <div class="commentBox">
                <div class="commentCont" v-html="$options.filters.pl(data)"></div>
                <div class="icon">
                    <div class="zan" @click="binxuan" :class="xuanzhong ? 'xuan' :''"><van-icon name="good-job-o" />{{data.like}}</div>
                    <div class="fen"><van-icon name="share-o" @click="showShare = true" /></div>
                </div>
                <div class="huifu" v-if="data.replies">
                    <div v-for="(item,i) in data.replies" :key="i">
                        <div class="hui1" v-html="$options.filters.pl(item)"></div>
                        <!-- <div class="hui1" v-if="item.content.members.length === 0"><span class="name">{{item.member.uname}}</span>  ：{{item.content.message}}</div> -->
                        <!-- <div class="hui2" v-else><span class="name">{{item.member.uname}}</span> 回复 <span class="name">{{item.content.members[0].uname}}</span> ：2222</div> -->
                    </div>
                    <div class="zongji" v-if="data.reply_control.sub_reply_entry_text">
                        <span>{{data.reply_control.sub_reply_entry_text}}<van-icon name="arrow" /></span>
                    </div>
                </div>
            </div>
        </div>
        <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
        />
    </div>
</template>

<script>
    export default {
        props:['data'],
        filters:{
            pl(item){
                let html = ''
                if (item.content.members.length === 0) {
                    html = `<span class="name">${item.member.uname}</span>  ：${item.content.message}`
                }else{
                    let reg = /@.*\s:/g
                    let cc = reg.exec(item.content.message)
                    let text = item.content.message.replace(cc[0],`<span class="name">${cc}</span>`)
                    
                    html = `<span class="name">${item.member.uname}</span> `+text
                }
                for (const i in item.content.emote) {
                    html = html.replace(new RegExp(`\\${i}`, 'g'),`<img src="${item.content.emote[i].url}" alt="">`)
                }
                return html
            }
        },
        data() {
            return {
            showShare: false,
            options: [
                { name: '微信', icon: 'wechat' },
                { name: '微博', icon: 'weibo' },
                { name: '复制链接', icon: 'link' },
                { name: '分享海报', icon: 'poster' },
                { name: '二维码', icon: 'qrcode' },
            ],
            xuanzhong:false
            };
        },
        methods: {
            onSelect(option) {
            this.$toast(option.name);
            this.showShare = false;
            },
            binxuan(){
                this.xuanzhong = !this.xuanzhong
                if (this.xuanzhong) {
                    this.data.like +=1
                }else{
                    this.data.like -=1
                }
            }
        },
    }
</script>

<style lang="less" scoped>
    .box{
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #ececec;
        .user{
            height: 40px;
            display: flex;
            img{
                height: 100%;
                border-radius: 50%;
                margin-right: 10px;
            }
            .userInfo{
                .userName{
                    height: 25px;
                    font-size: 12px;
                    color: #91939b;
                    line-height: 25px;
                }
                .time{
                    height: 15px;
                    font-size: 12px;
                    color: #91939b;
                }
            }
        }
        .commentBox{
            margin-top: 10px;
            margin-left: 50px;
            .commentCont{
                font-size: 14px;
                /deep/img{
                    height: 18px;
                    display: inline-block;
                    vertical-align:middle;
                }
            }
            .icon{
                display: flex;
                margin-top: 10px;
                /deep/.van-icon{
                    font-size: 18px;
                }
                .fen{
                    margin-left: 10px;
                }
            }
            .huifu{
                width: 100%;
                background-color: #ebebeb;
                padding: 10px;
                box-sizing: border-box;
                margin-top: 10px;
                .hui1{
                    /deep/span{
                        color: #33AAFA;
                    }
                    margin-bottom: 10px;
                    line-height: 20px;
                    /deep/img{
                        height: 18px;
                        display: inline-block;
                        vertical-align:middle;
                    }
                }
                .zongji{
                    span{
                        color: #33AAFA;
                    }
                }
            }
        }
        .xuan{
            color: #33AAFA;
        }
    }
</style>